<template>
  <a-card :bodyStyle="{ width: '100%', height: '100%', marginBottom: '10px' }">
    <a-form :model="labelFormState" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
      <a-form-item
        label="定义描述："
        name="desc"
        :label-col="{ span: 3 }"
        :wrapper-col="{ span: 14 }"
      >
        <a-textarea v-model:value="labelFormState.desc" />
      </a-form-item>
      <a-form-item
        label="状态："
        name="resource"
        :label-col="{ span: 3 }"
        :wrapper-col="{ span: 14 }"
      >
        <a-radio-group v-model:value="labelFormState.resource">
          <a-radio value="1">开启</a-radio>
          <a-radio value="2">关闭</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        label="关键词："
        name="resource"
        :label-col="{ span: 3 }"
        :wrapper-col="{ span: 21 }"
      >
        <a-table
          bordered
          :columns="columns"
          :data-source="dataSource"
          :pagination="false"
          :showHeader="false"
        >
          <template #name="{ text }">
            <a>{{ text }}</a>
          </template>
          <template #customTitle>
            <span>
              <smile-outlined />
              Name
            </span>
          </template>
          <template #tags="{}">
            <span>
              <supper-tag></supper-tag>
            </span>
          </template>
          <template #action="{ record, index }">
            <a style="color: rgba(242, 98, 94, 1)" @click="removeRule(record, index)">
              <minus-circle-filled />
              <span style="padding: 4px">删除规则</span>
            </a>
          </template>
        </a-table>
        <a-button type="dashed" style="width: 100%; margin-bottom: 8px" @click="addRule">
          <plus-outlined />
          添加
        </a-button>
      </a-form-item>
      <a-form-item
        label="排除词："
        name="resource"
        :label-col="{ span: 3 }"
        :wrapper-col="{ span: 21 }"
      >
        <supper-tag></supper-tag>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
import { PlusOutlined, MinusCircleFilled } from '@ant-design/icons-vue';
import SupperTag from '@/views/magic-cube/label-supermarket/production/components/supper-tag/index.vue';
const columns = [
  {
    title: '规则名称',
    dataIndex: 'name',
    key: 'name',
    slots: { title: 'customTitle', customRender: 'name' },
  },
  {
    title: '关键字',
    key: 'tags',
    dataIndex: 'tags',
    slots: { customRender: 'tags' },
  },
  {
    title: '操作',
    key: 'action',
    slots: { customRender: 'action' },
  },
];
export default defineComponent({
  name: 'tag-form',
  components: { SupperTag, PlusOutlined, MinusCircleFilled },
  setup() {
    const labelFormState = reactive({
      desc: '',
      resource: '',
    });
    const tableContext = reactive({
      columns,
      dataSource: [
        {
          key: 0,
          name: '规则1',
          tags: [],
        },
      ],
    });
    // 添加规则
    const addRule = () => {
      const index = tableContext.dataSource.length + 1;
      tableContext.dataSource.push({
        key: index,
        name: `规则${index}`,
        tags: [],
      });
      //   console.log(tableContext.dataSource);
    };
    // 删除规则
    const removeRule = (record, index) => {
      tableContext.dataSource.splice(index, 1);
      //   console.log(record, index);
    };
    return {
      labelFormState,
      ...toRefs(tableContext),
      addRule,
      removeRule,
    };
  },
});
</script>

<style lang="less" scoped></style>
